<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生产过程</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h3>生产过程</h3>
<div id="app">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="交接单查询">
            <el-input v-model="formInline.id" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table style="width: 100%"
              :data="Page.data"
              ref="Table"
              @selection-change=""
              row-key="id">
        <el-table-column label="序号">
            <template slot-scope="scope">
                <span>{{ scope.row.order2.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="产品名称">
            <template slot-scope="scope">
                <span>{{ scope.row.product.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="订单编号">
            <template slot-scope="scope">
                <span>{{ scope.row.order2.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column label="生产批次">
            <template slot-scope="scope">
                <span>1001</span>
            </template>
        </el-table-column>
        <el-table-column label="产品型号">
            <template slot-scope="scope">
                <span>{{ scope.row.product.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column label="产品颜色">
            <template slot-scope="scope">
                <span>黑色</span>
            </template>
        </el-table-column>
        <el-table-column label="生产数量">
            <template slot-scope="scope">
                <span>{{ scope.row.order2.number }}</span>
            </template>
        </el-table-column>
        <el-table-column label="下单时间">
            <template slot-scope="scope">
                <span>{{ scope.row.order2.dealTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="负责人">
            <template slot-scope="scope">
                <span>{{ scope.row.order2.explain}}</span>
            </template>
        </el-table-column>
        <el-table-column label="状态">
            <template slot-scope="scope">
                <span>{{ scope.row.order2.productStatus }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 10px;">
        <span class="demonstration">跳转</span>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Page.count">
        </el-pagination>
    </div>

    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="800px" @close="closeDialog">
        <el-table style="width: 100%"
                  :data="Page0"
                  row-key="order_id"
                  ref="Table2">
            <el-table-column label="交易成功时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.order2.dealTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="订单确认时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.order2.productPlanTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="生产时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.order2.productTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="入库时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.ioTime1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="出库时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.ioTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="发货时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.shippingDate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="查看物流">
                <template >
                    <el-button>查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //分页数据
                Page:[],
                // 当前页数
                current:1,
                // 每页的数据
                pageSizes:[5,10,20,50],
                // 当前每页的数据
                pageSize:5,
                //模态框数据
                Page0:[],
                // 模态框开关
                dialogFormVisible: false,
                formInline:{
                    id:""
                },
                selectId:"",
            }
        },
        methods:{
            // 加载表单数据
            loadPage:function(){
                axios.get("/ProductionProcess?current="+this.current+"&PAGE_SIZE="+this.pageSize+"&orderId="+this.formInline.id)
                    .then(res=>{
                        this.Page = res.data;
                    });
            },
            loadPage0:function () {
                console.log(this.selectId);
                axios.get("/ProductionProcessDetails?orderId="+this.selectId)
                    .then(res=>{
                        if(res.data){
                            this.Page0 = res.data;
                        }
                    });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadPage();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadPage();
            },
            closeDialog(){
                this.selectId ="";
            },
            handleEdit(index,row){
                this.selectId=row.order2.orderId;
                this.loadPage0();
                this.dialogFormVisible=true;
            },
            onSubmit(){
                this.loadPage();
            },
        },
        mounted() {
            this.loadPage();
        }
    })
</script>
</html>